<template>
  <div>
    <div style="display: flex;justify-content: space-between;align-items: center">
      <el-button v-if="selectJob.jobId" type="primary" @click="visible = true" icon="iconfont icon-auth-user">授权</el-button>
      <el-tag type="success" size="default">{{ selectJob.jobName || '未选择岗位'}}</el-tag>
    </div>
    <el-table v-loading="loading" :data="dataSource">
      <el-table-column prop="nickName" label="名称" align="center">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="mobilePhone" label="手机号" align="center">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" align="center">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="groupAllName" label="组织部门" align="center">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100px">
        <div slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="removeData(scope.row, scope.$index)" title="删除"></el-button>
        </div>
      </el-table-column>
    </el-table>
    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>

    <el-dialog :visible.sync="visible" title="选择用户" width="70%">
      <user-branch @rowSelect="selectUser" />
    </el-dialog>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import UserTable from "@/views/system/user/UserTable";
import UserBranch from "@/views/system/user/UserBranch";

export default {
  name: "UserJob",
  components: {UserBranch, UserTable},
  mixins: [IdeaTable],
  props: {
    selectJob: {
      type: Object,
      default: function () {
        return { jobId: '' }
      }
    }
  },
  watch: {
    'selectJob.jobId'(){
      this.addFilter({ field: 'jobId', op: '=', value: this.selectJob.jobId})
      this.loadSource()
    }
  },
  created() {
    this.queryUrl = '/userJob/list'
    this.saveUrl = '/userJob/save'
    this.removeUrl = '/userJob/delete/'
    this.rowKey = 'userJobId'
    this.pageInfo.pageSize = 20
  },
  methods: {
    selectUser(row) {
      this.saveData({ userId: row.userId, jobId: this.selectJob.jobId }, true)
    }
  }
}
</script>

<style scoped>

</style>
